<script setup lang="ts">
import "./index.scss";

import Zu55 from "./assets/zu55";

import * as echarts from "echarts";
import Module from "./module";

type EChartsOption = echarts.EChartsOption;

const conf: EChartsOption = {
	tooltip: {
		trigger: "item"
	},
	series: [
		{
			type: "pie",
			radius: ["55%", "70%"],
			center: ["50%", "50%"],
			left: 5,
			right: 5,
			top: 5,
			bottom: 5,
			label: {
				show: false
			},

			data: [
				{ value: 1048, name: "Search Engine" },
				{ value: 735, name: "Direct" },
				{ value: 580, name: "Email" },
				{ value: 484, name: "Union Ads" },
				{ value: 300, name: "Video Ads" }
			]
		},
		{
			name: "中间文字",
			z: 100,
			type: "gauge",
			radius: "-50%",
			center: ["50%", "50%"], // 需和type: 'pie'中的center一致
			// 配置中间的数字的样式
			detail: {
				// 调节数字位置
				offsetCenter: [-1, -10],
				fontSize: 18,
				color: "rgba(75, 186, 233, 1)"
			},
			pointer: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLabel: {
				show: false
			},
			// 中间的字和数字 数据
			data: [
				{
					value: 15,
					name: "总数",
					title: {
						// 配置“家居总数”的样式
						show: true,
						// fontSize: 12,
						color: "rgba(50, 197, 255, .5)",
						offsetCenter: [0, "-20%"]
					}
				}
			]
		}
	]
};
onMounted(() => {
	setTimeout(() => {
		const PieCharts = document.getElementById("pie-charts") as HTMLElement;
		// console.log(PieCharts);
		const myChart = echarts.init(PieCharts);
		conf && myChart.setOption(conf);
		window.onresize = () => myChart.resize();
	}, 500);
});
</script>

<template>
	<Module class="h-1/3 w-full box-border p-2" title="告警分布">
		<div class="flex flex-col w-full h-full">
			<div class="switch-box h-[32px] mx-2">
				<div class="h-full relative w-fit flex flex-row justify-center items-center">
					<div class="absolute w-1/2 h-full left-0 text-center flex justify-center text-[#FFA011]">
						<div class="w-fit h-full flex justify-between flex-col">
							<div class="h-fit mt-1">今日</div>
							<div class="h-[3px] w-full bg-[#FFA011] rounded-t-2xl" />
						</div>
					</div>
					<div class="absolute w-1/2 h-full right-0 text-center flex justify-center">
						<div class="w-fit h-full flex justify-between flex-col">
							<div class="h-fit mt-1">本月</div>
							<!--							<div class="h-[3px] w-full bg-[#FFA011] rounded-t-2xl" />-->
						</div>
					</div>
					<Zu55 class="h-full" />
				</div>
			</div>
			<div class="mx-2 flex-1 flex flex-row">
				<div class="w-1/2 h-full" id="pie-charts"></div>
				<div class="w-1/2 h-full">
					<div
						class="w-[132px] h-[46px] flex flex-row bg-[#0D54F919] before:bg-[#3177F6] border-left justify-center items-center mt-2"
					>
						<div>一级告警</div>
						<div class="text-xl text-center ml-2">9</div>
					</div>
					<div
						class="w-[132px] h-[46px] flex flex-row bg-[#0D54F919] before:bg-[#FFA011] border-left justify-center items-center mt-2"
					>
						<div>二级告警</div>
						<div class="text-xl text-center ml-2">5</div>
					</div>
					<div
						class="w-[132px] h-[46px] flex flex-row bg-[#0D54F919] before:bg-[#FC6060] border-left justify-center items-center mt-2"
					>
						<div>三级告警</div>
						<div class="text-xl text-center ml-2">1</div>
					</div>
				</div>
			</div>
		</div>
	</Module>
</template>

<style scoped lang="scss">
.border-left {
	position: relative;
	padding-left: 10px;
}

.border-left:before {
	content: "";
	position: absolute;
	left: 0;
	top: 15%;
	bottom: 15%;
	right: auto;
	height: 70%;
	width: 5px;
}
</style>
